<template>
    <div class="container">
        <div class="dayselect">
            <el-config-provider :locale="zhCn">
                <el-date-picker
                    @change="selectChange"
                    v-model="daySelect"
                    type="date"
                    placeholder=""
                    size="small"
                    :clearable="false"
                    :default-value="new Date()"
                    :disabled-date="disabledDate"
                    style="width: 120px"
                />
            </el-config-provider>
        </div>
        <e-charts ref="chart" class="chart" :option="option" :theme="theme"></e-charts>
    </div>
</template>

<script setup>
import { ref, onMounted, provide, computed, nextTick } from 'vue'
import http from '@/utils/http'
import * as util from '@/utils/util'
import { ElMessage } from 'element-plus'
import zhCn from 'element-plus/dist/locale/zh-cn.mjs'

onMounted(async () => {
    await getData()
    setInterval(function () {
        getData()
    }, 60 * 1000)
    nextTick(() => {
        emits('finish')
    })
})

// 监听窗口大小变化事件
window.addEventListener('resize', function () {
    if (chart.value) {
        chart.value.resize()
    }
})

const selectChange = e => {
    console.log(e)
    getData()
}

const disabledDate = date => {
    //最小日期 2024-09-03 js中的月最大为11
    const times = new Date(2024, 8, 3)
    return date.getTime() < times || date.getTime() > new Date().getTime()
}

const daySelect = ref(new Date())

const day = computed(() => {
    const year = daySelect.value.getFullYear()
    const month = (daySelect.value.getMonth() + 1).toString().padStart(2, '0')
    const d = daySelect.value.getDate().toString().padStart(2, '0')
    return `${year}-${month}-${d}`
})
const emits = defineEmits(['finish'])
const chart = ref()
const theme = ref('dark')
provide('THEME_KEY', theme.value)

const option = ref({
    backgroundColor: 'rgba(0, 0, 0, 0)',
    title: {
        text: '油烟浓度明细',
        subtext: '',
        x: 'center',
        textStyle: {
            color: '#b8e6ff',
            fontFamily: 'Microsoft YaHei',
            fontWeight: 'normal',
        },
    },
    dataZoom: [
        {
            type: 'inside',
        },
        {
            type: 'slider',
        },
    ],
    grid: {
        left: 60,
        bottom: 70,
        //right: 20,
    },
    //color: ['#1E9FFF', '#FFB800', '#FF5722'],
    color: ['#1E9FFF'],
    tooltip: {
        trigger: 'axis',
        axisPointer: {
            type: 'cross',
            label: {
                color: '#FFF',
                backgroundColor: '#1E9FFF',
            },
            lineStyle: {
                color: '#1E9FFF',
            },
            crossStyle: {
                color: '#1E9FFF',
            },
        },
        formatter: function (params) {
            if (params[0].data == '-') {
                return ''
            }
            var result = ''
            result += params[0].axisValue + '<br/>'
            result += params[0].marker + ('浓度：' + params[0].data)
            return result
        },
    },
    legend: {
        show: false,
        left: 'center',
        top: '30',
        //data: ['0-10', '10-30', '30及以上'],
        data: ['浓度'],
    },

    toolbox: {
        show: false,
        orient: 'vertical',
        right: '20',
        top: '20',
        feature: {
            //mark: { show: true },
            //dataView: { show: true, readOnly: true },
            //magicType: { show: true, type: ['line', 'bar', 'stack', 'tiled'] },
            //restore: { show: true },
            //saveAsImage: { show: true },
        },
    },
    xAxis: [
        {
            type: 'category',
            name: '',
            //axisTick: {
            //    alignWithLabel: true,
            //    show: true
            //},
            axisLabel: {
                show: true,
                // eslint-disable-next-line no-unused-vars
                formatter: function (value, index) {
                    return value
                },
            },
            data: [],
        },
    ],
    yAxis: [
        {
            name: '浓度(mg/m3)',
            type: 'value',
            position: 'left',
            axisLabel: {
                formatter: function (value) {
                    return value
                },
            },
        },
    ],
})

const getData = async () => {
    var mid = util.GetQueryParam('mid')
    if (mid) {
        var res = await http.get(`getoverdetail?mid=${mid}&day=${day.value}`)
        if (res.status === 0) {
            if (res.data) {
                var data = res.data
                for (var i = 0; i < data.seriesData.length; i++) {
                    data.seriesData[i].data = data.seriesData[i].data.map(function (item) {
                        return item != -1 ? item : '-'
                    })
                }
                option.value.xAxis[0].data = data.xAxisData
                option.value.series = data.seriesData
                if (data.dataMax) {
                    option.value.yAxis[0].max = data.dataMax
                }
            } else {
                ElMessage({
                    type: 'info',
                    message: '测点当前无浓度信息',
                })
                //ElMessageBox.alert('测点无资料或未连接','提示',{confirmButtonText: '确定',});
            }
        } else {
            console.log(res)
            ElMessage(res.msg)
        }
    }
}
</script>

<style lang="less" scoped>
.container {
    position: relative;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;

    .chart {
        box-sizing: border-box;
        width: 100%;
        height: 100%;
        padding-bottom: 10px;
    }

    .dayselect {
        position: absolute;
        top: 30px;
        left: 50%;
        transform: translateX(-50%);
        z-index: 100;
        width: 120px;
    }
}
</style>
